<!DOCTYPE html>
<html lang="zh_CN">
<!-- 这是可视化大屏页面 -->

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" />
  <title>股票分析预测系统</title>
  <script src="../static/js/jquery.js"></script>
  <script src="../static/js/my.js"></script>
  <link href="../static/css/main.css" rel="stylesheet" />
  <style>
    @media (max-width: 1920px) and (min-width: 768px) {
      html {
        zoom: 90%;
      }

      @-ms-viewport {
        width: 1920px;
      }
    }
  </style>
</head>

<body>
  <div class="canvas" style="opacity: .2">
    <iframe frameborder="0" src="../static/js/index.html" style="width: 100%; height: 100%"></iframe>
  </div>
  <header>
    <h1>股票信息可视化大屏展示</h1>
    <div class="showTime"></div>
    <script>
      var t = null;
      t = setTimeout(time, 1000); //開始运行
      function time() {
        clearTimeout(t); //清除定时器
        dt = new Date();
        var y = dt.getFullYear();
        var mt = dt.getMonth() + 1;
        var day = dt.getDate();
        var h = dt.getHours(); //获取时
        var m = dt.getMinutes(); //获取分
        var s = dt.getSeconds(); //获取秒
        document.querySelector(".showTime").innerHTML =
          "现在时间:" +
          y +
          "年" +
          mt +
          "月" +
          day +
          "-" +
          h +
          "时" +
          m +
          "分" +
          s +
          "秒";
        t = setTimeout(time, 1000); //设定定时器，循环运行
      }
    </script>
    <script>
      document.body.style.overflow = 'hidden';
      document.addEventListener('mousewheel', function (e) {
        e = e || window.event;
        if ((e.wheelDelta && event.ctrlKey) || e.detail) {
          event.preventDefault();
        }
      }, { capture: false, passive: false });
      document.addEventListener('keydown', function (event) {
        if ((event.ctrlKey === true || event.metaKey === true)
          && (event.keyCode === 61 || event.keyCode === 107
            || event.keyCode === 173 || event.keyCode === 109
            || event.keyCode === 187 || event.keyCode === 189)) {
          event.preventDefault();
        }
      }, false);
    </script>
  </header>

  <section class="mainbox">

    <div class="column">
      <div class="panel bar">
        <h2>柱状图-单价</h2>
        <div class="chart" id='l1'>图表</div>
        <div class="panel-footer"></div>
      </div>
      <div class="panel bar">
        <h2>柱状图-涨跌额</h2>
        <div class="chart" id="l2">图表</div>
        <div class="panel-footer"></div>
      </div>
      <div class="panel bar">
        <h2>条形图-各行业的市值的平均值</h2>
        <div class="chart" id="l3">图表</div>
        <div class="panel-footer"></div>
      </div>
    </div>
    <div class="column">
      <div class="no">
        <div class="no-hd">
          <ul>
            <li>4489</li>
          </ul>
        </div>
        <div class="no-bd">
          <ul>
            <li>本站统计的股票数据</li>
            <li>数据来源--雪球网_沪深股市</li>
          </ul>
        </div>
      </div>
      <div class="t">
        <h2>股票预测</h2>
        <div class="scrolling-text">
          <ul id="data-list">
            {% for row in predictions %}
            <li>{{ row[0] }} - {{ row[1] }} - {{ row[2] }}</li>
            {% endfor %}
          </ul>
        </div>
      </div>
      <div class="panel-footer"></div>
    </div>
    </div>
    <div class="column">
      <div class="panel bar">
        <h2>条形图-各行业的涨跌情况</h2>
        <div class="chart" id="r1">图表</div>
        <div class="panel-footer"></div>
      </div>
      <div class="panel pie">
        <h2>饼图- 每个行业的股票上涨的分别占所有上涨股票的比值</h2>
        <div class="chart" id="r2">图表</div>
        <div class="panel-footer"></div>
      </div>
      <div class="panel line">
        <h2>词云-社会热点</h2>
        <div class="chart" id="r3">图表</canvas></div>
        <div class="panel-footer"></div>
      </div>
    </div>
  </section>

  <script src="../static/js/flexible.js"></script>
  <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@5.2.1/dist/echarts.min.js"></script>
  <script src="../static/js/ec_left1.js"></script>
  <script src="../static/js/ec_left2.js"></script>
  <script src="../static/js/ec_left3.js"></script>
  <script src="../static/js/ec_right1.js"></script>
  <script src="../static/js/ec_right2.js"></script>
  <script src="../static/js/ec_right3.js"></script>
  <script src="../static/js/controller.js"></script>
  <script src="../static/js/row.js"></script>
  <script type="text/javascript"
    src="https://cdn.jsdelivr.net/npm/echarts-wordcloud@2.1.0/dist/echarts-wordcloud.min.js"></script>
</body>

</html>